{extend name="base"/}
{block name="resources"}
<style>
	.product-info{
		display: flex;
		flex-direction: column;
	}
	.product-info span{
		line-height: 1.5;
	}
</style>
{/block}
{block name="main"}
<!-- 列表 -->
<table id="order_list" lay-filter="order_list"></table>

<script type="text/html" id="payment">
	<div class="layui-form">
		<input type="hidden" name="out_trade_no" value={{d.out_trade_no}}>

		<div class="layui-form-item">
			<label class="layui-form-label img-upload-lable"><span class="required">*</span>付款凭证：</label>
			<div class="layui-input-inline img-upload">
				<div class="upload-img-block icon">
					<div class="upload-img-box" id="voucher">
						<div class="ns-upload-default">
							<img src="SHOP_IMG/upload_img.png" />
							<p>点击上传</p>
						</div>
					</div>
					<input type="hidden" name="paying_money_certificate"/>
					<i class="del">x</i>
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label"><span class="required">*</span>付款凭证说明：</label>
			<div class="layui-input-inline">
				<textarea name="paying_money_certificate_explain" class="layui-textarea ns-len-mid" lay-verify="required" placeholder="请输入付款凭证说明"></textarea>
			</div>
		</div>

		<!-- 表单操作 -->
		<div class="ns-form-row">
			<button class="layui-btn ns-bg-color" lay-submit lay-filter="submit">提交</button>
			<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
		</div>
	</div>
</script>

<!-- 工具栏操作 -->
<script type="text/html" id="operation">
	<div class="ns-table-btn">
		<a class="layui-btn" lay-event="detail">查看详情</a>
		{{# if(d.order_status == 3){ }}
		<a class="layui-btn" lay-event="edit">支付</a>
		{{# } }}

		{{# if(d.order_status != 1 && d.order_status != -1){ }}
		<a class="layui-btn" lay-event="close">关闭订单</a>
		{{# } }}

		{{# if(d.order_status == -1){ }}
		<a class="layui-btn" lay-event="del">删除</a>
		{{# } }}
	</div>
</script>

<script type="text/html" id="product_info">
	<div class="product-info">
		<span>套餐名称：{{d.order_name}}</span>
		<span>套餐类型：{{d.order_type_name}}</span>
	</div>
</script>

{/block}

{block name="script"}
<script>
	layui.use(['form', 'laytpl'], function() {
		var table,
				form = layui.form,
				laytpl = layui.laytpl,
				repeat_flag = false;
		var upload;

		form.render();

		table = new Table({
			elem: '#order_list',
			url: ns.url("shop/sysorder/lists"),
			cols: [
				[{
					field: 'order_no',
					title: '订单号',
					width: '17%',
					unresize: 'false'
				}, {
					title: '产品信息',
					width: '23%',
					unresize: 'false',
					templet: "#product_info"
				},{
					field: 'order_status_name',
					title: '状态',
					width: '13%',
					unresize: 'false'
				},{
					field: 'order_money',
					title: '价格',
					width: '9%',
					unresize: 'false'
				},
				{
					field: 'create_time',
					title: '创建时间',
					width: '18%',
					unresize: 'false',
					templet: function(data) {
						return ns.time_to_date(data.create_time);
					}
				},
				{
					title: '操作',
					width: '20%',
					toolbar: '#operation',
					unresize: 'false'
				}]
			]
		});

		/**
		 * 搜索功能
		 */
		form.on('submit(search)', function(data) {
			table.reload({
				page: {
					curr: 1
				},
				where: data.field
			});
			return false;
		});

		/**
		 * 监听工具栏操作
		 */
		table.tool(function(obj) {
			var data = obj.data,
					event = obj.event;

			switch (event) {
				case 'close':
					$.ajax({
						type : "post",
						dataType: 'JSON',
						url: ns.url("home/order/close"),
						data : { "order_id" : data.order_id },
						success : function(res) {
							layer.msg(res.message,{anim: 0},function () {
								layer.closeAll();
								window.location.reload();
							});
						}
					});
					break;
				case 'edit'://修改域名
					laytpl($("#payment").html()).render(data, function(html) {
						layer.open({
							type: 1,
							title: '支付',
							area: ['700px', '400px'],
							content: html
							, yes: function (index, layero) {
								layer.close(index);
							}
						});

						//上传支付凭证
						upload = new Upload({
							elem: '#voucher'
						});
					});
					break;
				case 'detail':
					location.href = ns.url("shop/sysorder/detail",{order_id: data.order_id});
					break;
				case 'del': // 删除
					delOrder(data.order_id);
					break;
			}
		});

		form.on('submit(submit)', function(data){
			// 删除图片
			if(!data.field.paying_money_certificate) upload.delete();

			if (repeat_flag) return false;
			repeat_flag = true;

			$.ajax({
				type: 'POST',
				url: ns.url("shop/sysorder/confirm"),
				data: data.field,
				dataType: 'JSON',
				success: function(res) {
					repeat_flag = false;
					layer.msg(res.message);
					if (res.code == 0) {
						layer.closeAll();
						table.reload();
					}
				}
			});
		});

		function delOrder(id) {
			if (repeat_flag) return false;
			repeat_flag = true;

			layer.confirm('确定要删除该订单吗?', function() {
				$.ajax({
					type: 'POST',
					dataType: 'JSON',
					url: ns.url("shop/sysorder/delete"),
					data: {order_id: id},
					success: function(res) {
						layer.msg(res.message);
						repeat_flag = false;

						if (res.code == 0) {
							table.reload();
						}
					}
				});
			}, function () {
				layer.close();
				repeat_flag = false;
			});
		}
	});
</script>
{/block}